Two men typing at the same keyboard

How to Copy & Paste

Effectively working with strangers and robots on the internet

Joe Glombek
An AI generated image of a woman in a wetsuit and wearing goggles, lying on a surfboard with a laptop.

Hello there, Professional Googlers

"Surfing the web?" - Created with DALL-E
Joe speaking on stage at CodeGarden

Hello, my name is Joe Glombek


  • Professional GooglerUmbraco Developer at Bump
  • Umbraco MVP
  • umBristol organiser

Joe and Paul Seal sat at a table with Paul on his laptop. Joe is smiling at the camera.

We're not competitors, we're a community

A child offering a helping hand to their younger sibling, playing in the woods

How can I ask for help from the community?

Phoebe and Joey meme from where she's trying to teach him french. The panels read Phoebe: "Read", Joey: "Read", P: "the", J: "the", P: "documentation", J: "documentation", P: "Read then documentation", J: "Copy StackOverflow answer!"

Where to get help

Google it first!

  • Documentation
  • YouTube
    CodeSharePaul, talk recordings, etc
  • Blog posts
    Personal blog, Skrift, etc
  • Source code
  • Existing answers to other people's questions

So you need to ask for help?

If you can't find the answer you're looking for, it's time to ask for help.

  • StackOverflow
  • Github?
  • Umbraco Forum
  • Discord
  • Mastodon/X/Facebook
Digital art of a unicorn floating in space with a colourful galaxy behind
⚠️ Shameless Mastodon Plug

Umbraco Community on Mastodon

</ Shameless Mastodon Plug>

How to ask for help

How can we ask for help in a way that's most likely to get the best possible answer?

  • Do your research first
  • Comprehend the problem ()
  • Be polite and patient - nobody has to help you
  • On-topic and suitable (including tags, categories, etc)
  • Summarize your problem
  • Include a reproducible example
Rubber ducks sat at desks with computers in an office setting. AI Generated.

What isRubber duckingAKA "Savaging from behind"?

"A ducking great work ethic", Created with DALL-E

What to ask where

Some questions lend themselves to specific environments.

  • Vague or conceptual question, hand holding

    • How might I go about implementing a...?

    • Suited to a chat format, like Discord
  • Opinionated or niche question

    • Which is more performant...?

    • Get a quorum by asking on social media
  • Technical or specific question

    • I'm trying to do this by ... but I'm getting an error...

    • A forum might be better suited, Our Umbraco or StackOverflow

Let's look at an example

Happy Monday!
In the backoffice (v10) I have a block list editor with image rows. That image row has an Image Media Picker, with the alias "image". I would like to show the name of that image in the block list editor's label for that row.
I have tried label values such as Image: {{ image.name }} and Image: {{ image }} but to no joy. Fields such as "caption" can be accessed happily though {{ caption }}, the problem arises because image is an Umbraco.MediaPicker3 and I'm trying to access the name of that specific piece of picked media (3).
I have scoured @Joe Glombek's EXCELLENT blog post but alas I am without results.
Please do consider helping a boy out on a cold, autumnal Monday morning.
TIA!

Improvable question

This is someone's first StackOverflow question - it's not necessarily a bad question, but we could improve it.

Title: "Implement SSO in ASP.NET MVC" Question: "How to implement a website with a list of application content, you can log in once on the first website and when you want to go to the second website, you don't need to log in again using ASP.NET MVC 5. I tried throwing params into the database and with this I was able to log in to other websites with just 1 login."

Title: "Implement SSO in ASP.NET MVC" Question: "How to implement a website with a list of application content, you can log in once on the first website and when you want to go to the second website, you don't need to log in again using ASP.NET MVC 5. I tried throwing params into the database and with this I was able to log in to other websites with just 1 login."

  • Research: None clear. Did they already search for solutions? Why was this not suitable?
  • Comprehend: Doesn't grasp key concepts of SSO
  • On-topic: Is navicat an appropriate tag?
  • Summarize: Unclear what the problem is and what solution they want.
  • Reproducible: Not enough information for me to build this myself and see how they're stuck.

How might we fix this?

Using a self-hosted OAuth server with ASP.NET MVC

I have an OAuth server configured (using the AuthU Package with an Umbraco install) and I'm having issues connecting with it from an ASP.NET MVC website.

I've tried registering the OAuth server in Startup.cs:

services.AddAuthentication(...)

But I get the following error:

An Exception of type MadeUpAsAnExampleException was thrown...

asp.net asp.net-mvc oauth asp.net-identity

Animation of The Simpsons newsreader Kent Brockman on TV captioned "I, for one, welcome our new robot overlords.". The word "robot" is clearly superimposed.

What about AI?

AI is an other place we can ask questions for help.

  • Our programs and our code samples
  • Effectively built by the community
  • You need the same skills to effectively use AI as for human-generated answers

AI tooling

  • OpenAI ChatGPT
  • Github Copilot
  • Google Gemini

What can I ask AI to do?

  • A starting point for:
    • Regular expressions

      Write me a regular expression for UK phone numbers

    • Generic coding questions
  • Autocomplete of common structures and repeating patterns
  • Explaining code samples and error messages
  • Converting from one format to another

    Convert the following XML file into JSON

  • Be my rubber duck
Rubber ducks sat at desks with computers in an office setting. AI Generated.
Rubber ducks sat at desks with computers in an office setting. AI Generated.
A collection of rubber ducks on computers and laptops with headsets or holding phones. AI Generated.
A rubber duck sat at a laptop "rubber ducking" with a rubber human. AI Generated.
A rubber duck sat at a laptop "rubber ducking" with a rubber human. AI Generated.

When might I want to ask elsewhere?

  • Poor understanding of performance
  • Understanding versions
    • Old Umbraco vs Umbraco 9+
    • WebClient vs HttpClient
    • Which type of controller you're using
  • Often inverts boolean logic?!
  • Can struggle with modifications

    Write me a regular expression for international phone numbers
    Don't people in the US often hyphenate their phone numbers?

  • Makes things up
  • It will never ask questions or give options

ChatGPT making things up

ChatGPT screenshot. User: Create an Apple Shortcuts automation to put my phone into a focus mode called "Sleep" when the phone is charging between 9pm and 8am ChatGPT: Open the Shortcuts app on your iPhone. Tap on the "Automation" tab at the bottom. Tap on the "+" icon to create a new automation. Choose the "Charger" trigger. Toggle on "Is Connected". Tap on "Next". Tap on "Add Action". Search for and select the "Set Focus" action. Tap on the "Focus" field and select or create a focus mode called "Sleep". Tap on "Next". Toggle on "Time of Day". Set the start time to 9 PM and the end time to 8 AM. Tap on "Next". Toggle off "Ask Before Running". Tap on "Done" to save the automation. Now, whenever your phone is connected to the charger between 9 PM and 8 AM, it will automatically activate the "Sleep" focus mode.
ChatGPT screenshot. User: There is no "Time of Day" toggle
ChatGPT screenshot. User: There is no "Time of Day" toggle
ChatGPT screenshot. User: There is no "Time of Day" toggle
Two men typing at the same keyboard

Now we need to know… How to Copy & Paste

🎉 (Roll credits...)

We've established AI can be wrong.

AI learns from people,
People are wrong too.

Copy & Pasting vs. Comprehending

  • Human or robot, we need to understand what we're copying into our projects
  • Big indicator of seniority
  • We don't need to understand every intricacy of the code, but we should have an idea line-by-line what it's doing
A magnifying glass over the top of a keyboard

Assessing Suitability of a Solution

add asterisk to required fields without additional markup

A similar outcome could be achieved by using a background image of a picture of an asterisk and setting the background of the label/input/the outer div and a padding of the size of the asterisk image. Something like this:

.required input {
  padding-right: 25px;
  background-image: url(...);
  background-position: right top;
}

This will put the asterisk INSIDE the text box, but putting the same on div.required instead of .required input will probably be more what you're looking for, if a little less elegant. This method doesn't require an additional input.

Stack Overflow questions screenshot reading: What is a good way to overcome the unfortunate fact that this code will not work as desired: &lt;div class=&quot;required&quot;&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;input type=&quot;text&quot;&gt; &lt;/div&gt; &lt;style&gt; .required input:after { content:&quot;*&quot;; } &lt;/style&gt; In a perfect world, all required inputs would get the little asterisk indicating that the field is required. This solution impossible since the CSS is inserted after the element content, not after the element itself, but something like it would be ideal. On a site with thousands of required fields, I can move the asterisk in front of the input with one change to one line (:after to :before) or I can move it to the end of the label (.required label:after) or in front of the label, or to a position on the containing box, etc... This is important not just in case I change my mind about where to place the asterisk everywhere, but also for odd cases where the form layout doesn't allow the asterisk in the standard position. It also plays well with validation that checks the form or highlights improperly completed controls. Lastly, it doesn't add additional markup. Are there any good solutions that have all or most of the advantages of the impossible code?
Screenshot of the answer shown before with a "This post is hidden" message as well as a disclaimer "Although this is the accepted answer, please ignore me and use the :after syntax suggested below. My solution is not accessible." and a comment from the answerer "Its worth noting, however, that this isn't very screen-reader friendly. Max's answer is much better in this respect. In fact in most cases, Max's answer is more ideal - just not for the OP."
A magnifying glass over the top of a keyboard

Joe's guide toAssessing suitability

  • Does it answer my question?
  • Line by line, what is this doing?
  • Does the code match the description?
  • Does that feel right?
  • How can we increase our confidence in this answer?
A similar outcome could be achieved by using a background image of a picture of an asterisk and setting the background of the label/input/the outer div and a padding of the size of the asterisk image. Something like this: .required input { padding-right: 25px; background-image: url(...); background-position: top; } This will put the asterisk INSIDE the text box, but putting the same on div.required instead of .required input will probably be more what you're looking for, if a little less elegant. This method doesn't require an additional input.
  • Does it answer my question?
  • Line by line
  • Code matches description?
  • Feels right?
  • Increase confidence
Screenshot of a ChatGPT interaction. The prompt reads "Write me some C# code to decide whether to output black or white text dependent on a hexadecimal background color" and the answer includes a code sample with the explanation "This code first parses the hexadecimal color string into its red, green, and blue components. It then calculates the luminance of the color using the standard formula for converting RGB values to luminance. Finally, it uses the luminance value to decide whether to output black or white text."
  • Does it answer my question?
  • Line by line
  • Code matches description?
  • Feels right?
  • Increase confidence
Four young adults running away from the camera through the desert, towards cacti and large rocks

Dry run testing

The programmer would sit down [...] and manually follow the value of a variable to check that it was used and updated as expected

Repeat of ChatGPT screenshot
hexColor = "#ffffff"

r = "ff" = 256
g = "ff" = 256
b = "ff" = 256

luminance ≈ (0.2 * 265) + (0.7 * 256) + (0.1 * 256)
          ≈      53     +     180     +      26
          ≈ 261

261 > 128

result = "#000000"

hexColor = "#1b264f"

r = "1b" = 27
g = "26" = 38
b = "4F" = 79

luminance ≈ (0.2 * 27) + (0.7 * 38) + (0.1 * 79)
          ≈      5    +     27    +      8
          ≈ 40

40 < 128

result = "#FFFFFF"

Adapting Code to Meet Needs

When we understand the code, we can tweak it to our needs

We'd all have a better idea of how to modify the previous example to, for example:

  • Enforce accessibility contrast levels
  • Change the resulting colours (not black/white)
  • Extract this method into smaller reusable helper methods

Considering Performance

  • Do we always want the "most performant" answer?
  • Legibility can be more important
  • You don't always need to get caught up in a debate about the "best" way to do something
  • Consider performance based on the context and frequency of code execution
    • code running once a day
    • code running 100 times per second
  • Consider the complexity of a solution
    • loops
    • nested loops
    • LINQ
Two men typing at the same keyboard

How to Copy & Paste

  • Google it!
  • Ask the best people (or robots) in the best place in the best way
  • Know what and why you're asking ()
  • Understand and validate the answer
  • Adapt to meet your needs
Joe speaking on stage at CodeGarden

Thank you

Slides:

Awkwardly highlight the "copy & paste" joke

## CFP Since the dawn of Forums, CodeProject and Stack Overflow - and more recently with Our Umbraco, Github, Discord, Youtube and blog posts - we've been building applications with strangers on the internet, copying and pasting other developers' code. And now with the advent of ChatGPT, GitHub CoPilot and other AI solutions, it's easier than ever to use code somebody (or something) else wrote... without necessarily understanding the code completely. We all copy and paste code, but a senior developer will often approach the task in different way to someone more junior. We'll look at how to level-up our Ctrl+V game through understanding the problem, assessing suitability and adapting code samples to meet our needs. Together, we can build something better and quicker... so long as we know what we're building.

![bg left:40%](images/surfing-the-web.png)

We've all heard that software developers are just "professional Googlers" - the more senior you are is mostly a product of how good you are at Googling. It's a great joke... but have you tried being a developer _without_ internet access? It doesn't feel like much of a joke then, does it? But I don't see this as a negative. When we're isolated we might feel weak and hopeless but as a team - a community - we're quick and efficient problem solvers. And that's where the idea for this talk came from: how can we work together more effectively as a worldwide developer community without getting stung along the way?

This photo is from after a Umbraco festival in the UK, when me and Paul (from Codeshare, creater of the Clean Starter Kit) went back to our hotel. The aim was to grab a snack and get some sleep, but we accidentally ended up fixing some bugs in the Clean Starter Kit together! In an open source world, we're much stronger together. So we shouldn't be afraid to ask for help, and to offer our expertise to others.

Before we start with how and what to copy and paste, let's first start with some places we might find answers -

StackOverflow - good for more generic development questions Github? - some repositories have discussions or issues may be appropriate Umbraco Forum - specific to Umbraco Discord - specific to Umbraco Mastodon/X/Facebook

Shameless Mastodon Plug There's a strong contingent of the Umbraco Community now using **Mastodon** in place of Twitter/X. 94 active users as of yesterday + users on other servers Already on masto? Directory Want to join the community masto? Link

How can we ask for help in a way that's most likely to get the best possible answer? Although the community is very helpful, it't to our own benefit to ask the right questions in the right places.

Do your research *first* Although you've already searched for an answer to your question, it's also important we do some background research so we can explain ourselves correctly and be very specific about our problem. Comprehend the problem There's very little point in asking a question if we don't know what we're asking. If we don't understand what we're asking we need to ask a different question Comprehend here basically means "understand", but I feel it emphasises we don't need to *understand* everything, just *comprehend* what we *wan't* to understand. Be polite and patient - nobody _has_ to help you On-topic and suitable (including tags, categories, etc) Summarize your problem Include a reproducible example --- We know this is good advice, because it inspired by StackOverflow. And if anybody is fussy about how you ask a question, it's them!

As a junior fresh-out-of-his-apprenticeship developer, I had a boss called Mr Savage. We'd often call him over to ask him questions, only to have the answer immediately present itself without him saying a word. We called this "Savaging from behind" - all he had to do was stand behind us and the problem was solved. Other developers have discovered this solution, but not all of them had a Mr Savage! They had to settle for a rubber duck on their desk (or anything with a face, really) The idea: forming your questions into actual verbalised queries providing context out loud can help yourself to better understand a problem come up with a solution This can really help with the "comprehend the problem" step

### **<i class="fad fa-duck"></i>**

Discord - one person can ask questions to help work out what you need Social media - lots of people can chime in with their opinions and experiences Forum - tend to be longer questions with longer answers

Do your research: Read my blog post Understand the problem: detailed, said what he's tried Be polite: Flattery will get you everywhere! Friendly, sociable, "TIA" On topic & suitable: Umbraco Discord, help-with-umbraco channel, hoping for a quick, short reply (it actually helped us chat it over and try things out without me needing to replicate) Summarize your problem: Pictures! "I would like to..." Reproducible example: Provided Umbraco version, media picker version, exact setup - I could do this!

We've been talking a lot about community and collaboration - so why am I brining up artificial intelligence? Is it because I want this talk to sound topical and modern? Well... yes. But only in part! AI has been scouring the internet looking at _our_ programs and _our_ code samples. As I see it, AI is a tool built by the community. And it takes a lot of the same skills to effectively use AI generated code as it does to pick the right Stack Overflow answer.

Let's see how Scott Hanselman uses AI to rubber duck [Play video] You know what AI is also good at? Generating pictures of rubber ducks in an office setting...

You know what AI is also good at? Generating pictures of rubber ducks in an office setting...

You know what AI is also good at? Generating pictures of rubber ducks in an office setting...

...or rubber ducks using humans as rubber ducks

Makes things up: AI will rarely tell you that you can't do something. It will generally make up ways you can... even if those ways are not possible and use API methods that simply don't exist.

So, you've asked a question and got an answer.

Example: searching for a way to add asterisk to fields without extra markup

Come across this stack overflow answer Uses background image on the input to draw an image of an asterisk. If we didn't know better (or think it through) this is a valid solution to the question

Look at the question they're asking a different question! They're saying the *more correct* solution doesn't work for them. May sound like a contrived answer to question It's real I answered it

That's my answer! Kept getting upvotes for it. I know there's no way that was the correct answer for anyone else. They've been Googling like we said and come across my *marked as solution* answer! Added a comment to highlight better solutions Then edited the answer to highlight the better solution Then made that warning big and bold Then finally gave in and deleted my answer! It was the right answer for this person, but others were mistaking it for their correct answer **SO OFTEN**

So here's Joe's guide to comprehending and assessing suitability. - Answer Q? - Does the answer make sense as a response to my question? - Could've misread/misunderstood - Is my question the same one as being answered? - If reading someone elses question - Line by line - If it's a code solution, what does each line do? - We don't need to understand every intricacy of the code, but we should have an ***idea*** line-by-line what it's doing - Match description - Does a written description match up with what the code does? - If not - bad smell! - Feel right - How's the gut feel? - What existing knowledge can we apply? - Increase confidence - What else could we ask or look up to reassure us?

Applied to my last - Answer Q? - No, answering a different one - Line by line - adding an image - Match description - yes - Feel right - NO! Background knowledge - There's no semantics here, background images not readable by a screen reader - Increase confidence - no need, we've already failed! Could look up semantics of required fields Let's look at another example...

Does it answer my question? Read Q and A Line by line, what is this doing? - takes a hex string value - splits out R/G/B values - converts them from hex to int - calculates a "luminance" - checks for luminance value (128 = 256/2) Does the code match the description? The code seems to match up with the description Does that _feel_ right? - things I don't fully understand - generally somewhat like I was expecting - I didn't know the hex conversion function existed, but it seems right How can we increase our confidence in this answer? Most useful info: I now know I want to calculate the luminance. So now I can go away and validate the luminance formula (which it got right!) and we're away! I can also check luminance is